<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket CRUD 示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
        }
        .section {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input, button {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            box-sizing: border-box;
        }
        .result {
            margin-top: 20px;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
        }
        .error {
            color: red;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>WebSocket CRUD 示例</h1>

    <!-- 增加数据 -->
    <div class="section">
        <h3>新增数据</h3>
        <label for="add-username">用户名:</label>
        <input type="text" id="add-username" placeholder="输入用户名">
        <label for="add-password">密码:</label>
        <input type="password" id="add-password" placeholder="输入密码">
        <button onclick="handleAdd()">新增</button>
    </div>

    <!-- 删除数据 -->
    <div class="section">
        <h3>删除数据</h3>
        <label for="delete-id">ID:</label>
        <input type="text" id="delete-id" placeholder="输入要删除的 ID">
        <button onclick="handleDelete()">删除</button>
    </div>

    <!-- 更新数据 -->
    <div class="section">
        <h3>更新数据</h3>
        <label for="update-id">ID:</label>
        <input type="text" id="update-id" placeholder="输入要更新的 ID">
        <label for="update-password">新密码:</label>
        <input type="password" id="update-password" placeholder="输入新密码">
        <button onclick="handleUpdate()">更新</button>
    </div>

    <!-- 查询数据 -->
    <div class="section">
        <h3>查询数据</h3>
        <label for="query-username">用户名:</label>
        <input type="text" id="query-username" placeholder="输入用户名">
        <button onclick="handleQuery()">查询</button>
    </div>

    <!-- 结果展示 -->
    <div class="result">
        <h3>结果:</h3>
        <pre id="result-output"></pre>
    </div>
</div>

<script src="../utils/WebSocketUtil.js"></script>
<script>
    // 初始化 WebSocket 工具类
    const wsUtil = new WebSocketUtil("ws://127.0.0.1:8001/websocketTest001/haha");
    wsUtil.connect();

    // 更新结果展示区域
    function updateResult(result) {
        const resultOutput = document.getElementById("result-output");
        resultOutput.textContent = JSON.stringify(result, null, 2);
    }

    // 显示错误信息
    function showError(error) {
        const resultOutput = document.getElementById("result-output");
        resultOutput.textContent = `错误: ${error.message}`;
        resultOutput.classList.add("error");
    }

    // 新增数据
    function handleAdd() {
        const username = document.getElementById("add-username").value;
        const password = document.getElementById("add-password").value;

        if (!username || !password) {
            alert("用户名和密码不能为空！");
            return;
        }

        wsUtil.add({ username, password })
            .then((response) => {
                updateResult(response);
            })
            .catch((error) => {
                showError(error);
            });
    }

    // 删除数据
    function handleDelete() {
        const id = document.getElementById("delete-id").value;

        if (!id) {
            alert("ID 不能为空！");
            return;
        }

        wsUtil.delete(id)
            .then((response) => {
                updateResult(response);
            })
            .catch((error) => {
                showError(error);
            });
    }

    // 更新数据
    function handleUpdate() {
        const id = document.getElementById("update-id").value;
        const password = document.getElementById("update-password").value;

        if (!id || !password) {
            alert("ID 和新密码不能为空！");
            return;
        }

        wsUtil.update(id, { password })
            .then((response) => {
                updateResult(response);
            })
            .catch((error) => {
                showError(error);
            });
    }

    // 查询数据
    function handleQuery() {
        const username = document.getElementById("query-username").value;

        if (!username) {
            alert("用户名不能为空！");
            return;
        }

        wsUtil.query({ username })
            .then((response) => {
                updateResult(response);
            })
            .catch((error) => {
                showError(error);
            });
    }
</script>
</body>
</html>